<template>
  <div class="">
    <nil-page title="菜单列表" icon="search">
      <template #option>
        <el-button type="primary" @click="handleCreate">添加</el-button>
      </template>
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        default-expand-all
      >
        <el-table-column prop="name" label="菜单名称" />
        <el-table-column prop="icon" label="图标" width="80px">
          <template #default="scope">
            <i class="iconfont" :class="[scope.row.icon]"></i>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="菜单路径" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" @click="handleEdit(row)">修改</el-button>
            <el-button type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </nil-page>
    <el-drawer
      v-model="addAndChangeBox"
      :title="`${isChange ? '修改' : '添加'}菜单`"
      direction="rtl"
    >
      <ac-box
        :data="oneData"
        :loading="oneDataLoading"
        :isChange="isChange"
        :topMenus="tableData"
        :iconfont="iconfont"
        @change="change"
        @save="save"
        @cancel="addAndChangeBox = false"
      />
    </el-drawer>
  </div>
</template>

<script setup>
// import { nilIcons } from "@/conf/nil.icons";
import { onMounted, reactive, ref } from "vue";
import api from "@/http/api";
import {
  ADMIN_MENU_LIST,
  ADMIN_MENU_CHANGE,
  ADMIN_MENU_DELETE,
} from "@/http/uri";
import { ElMessage, ElMessageBox } from "element-plus";
import { buildTree } from "@/utils/index";
import AcBox from "./AcBox.vue";

import iconfont from "@/config/iconfont.json";

onMounted(() => {
  initData();
});

// const nilIcons = [];
const tableData = ref([]);

const tableDataLoading = ref(false);
function initData() {
  tableDataLoading.value = true;
  api
    .GET(ADMIN_MENU_LIST)
    .then((res) => {
      if (res.success) {
        let data = res.data;
        data = buildTree(data, "id", "pid", (item) => item.pid == 0);
        tableData.value = data.sort((a, b) => b?.sort - a?.sort);
      }
    })
    .finally(() => {
      tableDataLoading.value = false;
    });
}

const isChange = ref(false);
const oneDataLoading = ref(false);
const addAndChangeBox = ref(false);
const oneData = reactive({
  pid: 0,
  name: "",
  path: "",
  icon: "",
  sort: 0,
});
let _oneDataBackJSON = "";

function handleCreate() {
  oneData.pid = "0";
  oneData.name = "";
  oneData.path = "";
  oneData.icon = "";
  oneData.id = "";
  oneData.sort = 0;
  isChange.value = false;
  addAndChangeBox.value = true;
}

function handleEdit(row) {
  oneData.pid = row.pid ?? "";
  oneData.name = row.name ?? "";
  oneData.path = row.path ?? "";
  oneData.icon = row.icon ?? "";
  oneData.id = row.id ?? "";
  oneData.sort = row.sort ?? "";

  isChange.value = true;
  addAndChangeBox.value = true;
  _oneDataBackJSON = JSON.stringify(oneData);
}
function handleDelete(row) {
  ElMessageBox.confirm("是否要进行 删除 操作, 是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      api.DELETE(ADMIN_MENU_DELETE(row.id)).then((res) => {
        if (res.success) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          initData();
        } else {
          ElMessage({
            type: "error",
            message: res.message,
          });
        }
      });
    })
    .catch(() => {});
}

function save(data) {
  oneDataLoading.value = true;
  let upData = JSON.parse(JSON.stringify(data));
  api
    .POST(ADMIN_MENU_CHANGE, upData)
    .then((res) => {
      if (res.success) {
        ElMessage.success(res.message);
        addAndChangeBox.value = false;
        _oneDataBackJSON = "";
        initData();
      } else {
        ElMessage.error(res.message);
      }
      oneDataLoading.value = false;
    })
    .catch(() => {
      oneDataLoading.value = false;
    });
}

const change = (data) => {
  console.log("[ data ] >", data);
  if (_oneDataBackJSON == "") {
    ElMessage.error("修改失败.");
    return;
  }
  if (_oneDataBackJSON == JSON.stringify(data)) {
    ElMessage.error("没有修改内容.");
    return;
  }
  oneDataLoading.value = true;
  api
    .PUT(ADMIN_MENU_CHANGE, data)
    .then((res) => {
      if (res.success) {
        ElMessage.success(res.message);
        addAndChangeBox.value = false;
        _oneDataBackJSON = "";
        initData();
      } else {
        ElMessage.error(res.message);
      }
      oneDataLoading.value = false;
    })
    .catch(() => {
      oneDataLoading.value = false;
    });
};
</script>

<style lang="scss" scoped></style>
